<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>模态弹窗</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
        -->
    <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js">ajax</script>
    <script src="http://www.stacysi.top:8888/myboke/js/Vue.main.js"></script>
    <!-- 路由-->
    <script src="https://unpkg.com/vue-router/dist/vue-router.js">路由</script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div>数据</div>
    <div class="login">
        ddd
    </div>
    <!--v-for="site in sites"
        <li v-for="(value, key, index) in object">
        {{ index }}. {{ key }} : {{ value }}
        </li>
        <li v-for="n in 10">
        {{ n }}
        </li>
        <div v-bind:class="[activeClass, errorClass]"><div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
            阻止单击事件冒泡 
        <a v-on:click.stop="doThis"></a>
         提交事件不再重载页面 
        <form v-on:submit.prevent="onSubmit"></form>
        修饰符可以串联  
        <a v-on:click.stop.prevent="doThat"></a>
        只有修饰符 
        <form v-on:submit.prevent></form>
        添加事件侦听器时使用事件捕获模式
        <div v-on:click.capture="doThis">...</div>
        只当事件在该元素本身（而不是子元素）触发时触发回调 
        <div v-on:click.self="doThat">...</div>
        click 事件只能点击一次，2.1.4版本新增
        <a v-on:click.once="doThis"></a>
        <input v-on:keyup.13="submit">====记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：.enter
        .tab.delete (捕获 "删除" 和 "退格" 键).esc.space.up.down.left.right.ctrl.alt.shift.meta
        <input v-on:keyup.enter="submit">

    -->
    <div id="lk">
        <a v-if="ji.show" v-bind:href="url">{{ji.hu|filter1}}</a>
        <span v-if="ji.show" v-on:click="handle">{{ji.hu}}</span>
        <input v-model="something" v-focus></input>
        <span v-on:click="handl">dpost</span>
        <span v-on:click="postHttp">dpost请求测试</span>
        <mo v-bind:message="something"></mo>
        <yyt></yyt>
        <jmk v-on:inc="hand" v-bind:mes="ji"></jmk>
    </div>
    <script type="text/javascript">
        $(".login").click(
            function () {
                alert(vuelogin)
                console.log(vuelogin)
            }
        )

        /*全局组件语法格式如下 
            Vue.component(tagName, options)tagName 为组件名，options 为配置选项
            <tagName></tagName>
            父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"：
        */
        Vue.component('mo',{
            // 声明 props
            props: ['message'],
            template:'<p>hhh{{message}}</p>'
        })

        /*局部组件 在当前vue实例中使用*/
        var thild = {
            template:'<p>hhgg</p>'
        }

        // 注册一个全局自定义指令 v-focus
        Vue.directive('focus', {
        // 当绑定元素插入到 DOM 中。
        inserted: function (el) {
            // 聚焦元素
            el.focus()
            }
        })

        /*
        自定义事件
        父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！
        我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：
        使用 $on(eventName) 监听事件
        使用 $emit(eventName) 触发事件
        */
        Vue.component('jmk',{
            template: '<div v-on:click="change">gf{{mes.hu}}</div>',
            props: ['mes'],
            data: function(){
                return {
                    something:'子组件改变数据'
                }
            },
            methods:{
                change:function(){
                    this.$emit('inc','heell')
                }
            }
        })
                   
        var vuelogin = new Vue({
            el: '#lk',
            data: {
                ji: {
                    hu: "数据",
                    show: true
                },
                url: 'http://www.baidu.com',
                something:'你是谁呀'
            },
            methods: {
                handle: function (h) {
                    this.something='丢你个肺呀'
                    alert("数据显示问题呀，我的天呀，")
                    this.something = h
                },
                handl: function () {
                    var _this = this
                    alert(this.something)
                    //this.$options.methods.postHttp()//调用其他方法，虚考虑this指向问题 var _this = this
                },
                hand: function(val){
                    alert(val)
                    this.ji.hu=val
                },
                /*
                 基于全局Vue对象使用http
                    Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
                    Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
                    // 在一个Vue实例内使用$http
                    this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
                    this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
                */
               postHttp: function(){
                   //post 请求
                   var userDTO = {
                       username:'ko',
                       password:'password',
                       nickname:'nickname',
                       salt:'salt'
                   }
                   $.ajax({
                       type:'post',
                       data:JSON.stringify(userDTO),
                       contentType: "application/json;charset=UTF-8",
                       url:'/register',
                       success:function(data){
                            console.log(data)
                       },
                       error:function(data){
                           console.log(data)
                       }
                   })
               }
            },
            filters:{
                filter1:function(value){
                    console.log(value)
                    
                    if (value == '数据')
                    {
                        /* 过滤器需要返回值*/
                        return "你是哪个"
                    }
                }
            },
            /* 监听器监听属性*/
            watch: {
                something:function(){
                    this.something='ddddd'
                }
            },
            computed:{
                
            },
            comments:{
                'yyt':thild
            },
            directives: {
                // 注册一个局部的自定义指令 v-focus
                foc: {
                // 指令的定义
                inserted: function (el) {
                    // 聚焦元素
                    el.focus()
                        }
                    }
            }
        })

        /* 监听器监听Vue 属性*/
        vuelogin.$watch('something',function(){
            alert("监听器")
        })
    </script>
</body>

</html>